<template>
	<view class="de_cantent">
		<!-- 轮播图 -->
		<view class="de_swiper">
			<u-swiper :list="list" :effect3d="true" height="748" border-radius="16" bg-color="#FFFFFF"></u-swiper>
		</view>
		<!-- 商品名称|发货地|单价|单间重量|单件体积 -->
		<view class="de_title">
			<view class="de_title_block">
				<view class="de_title_block_title">REVAN芮范2024秋季新品酷感趣味小熊条 纹短款T恤卫衣RU71001100</view>
				<view class="de_title_block_but">
					<view class="de_title_block_but_one">
						<image :src="HTTP_IMG_UTL+'refi_@4x.png'" style="width: 40rpx;height: 40rpx;"/>
						<view :class="lang==='zh'?'container_zh':'container_ru'">{{$t('发货地')}}</view>
					</view>
					<view class="de_title_block_but_one">
						<image :src="HTTP_IMG_UTL+'refi_@4x.png'" style="width: 40rpx;height: 40rpx;"/>
						<view :class="lang==='zh'?'container_zh':'container_ru'">{{$t('单价')}}</view>
					</view>
					<view class="de_title_block_but_one">
						<image :src="HTTP_IMG_UTL+'refi_@4x.png'" style="width: 40rpx;height: 40rpx;"/>
						<view :class="lang==='zh'?'container_zh':'container_ru'">{{$t('单件重量')}}</view>
					</view>
					<view class="de_title_block_but_one">
						<image :src="HTTP_IMG_UTL+'refi_@4x.png'" style="width: 40rpx;height: 40rpx;"/>
						<view :class="lang==='zh'?'container_zh':'container_ru'">{{$t('单件体积')}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- LOGO -->
		<view class="de_size">
			<!-- LOGO图标 -->
			<view class="de_logo">
				<image :src='serverImageUrl("/static/file.png")' style="width: 96rpx;height: 96rpx;border-radius: 16rpx;"/>
			</view>
			<view class="de_evaluate">
				<view class="de_evaluate_title">芮范2024秋季新品</view>
				<view class="de_evaluate_block">
					<view class="de_evaluate_block_left">
						<image :src="HTTP_IMG_UTL+'china@4x.png'" style="width: 24rpx;height: 24rpx;"/>
						<view style="font-size: 20rpx;height: 20rpx;margin-left: 8rpx;line-height: 20rpx;">{{$t('中国')}}</view>
					</view>
					
					<view class="de_Comprehensive_evaluation">
						<view style="position: relative;margin-bottom: -9rpx;">
							<image :src="HTTP_IMG_UTL+'pingjia123_138@4x.png'" style="width: 392rpx;height: 44rpx;margin-bottom: -2rpx;margin-right: -2rpx;"/>
							<view class="de_Comprehensive_title">
								<view style="margin-left: 58rpx;">{{$t('综合评价')}} :</view>
								<view style="margin-left: 10rpx;">
									<image v-for="(item,index) in 5" :key="index" :src="HTTP_IMG_UTL+'xingxing@4x.png'" style="width: 28rpx;height: 28rpx;margin-top: 8rpx;margin-left: 5rpx;" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 尺寸 -->
		<view class="de_Size_module">
			<view class="de_Size_module_1">
				<view class="de_line"></view>
				<view style="margin-left: 8rpx;">{{$t('尺寸信息')}}</view> 
				<!-- <span style="font-size: 20rpx;margin-bottom: 3rpx;font-weight: 500;">（{{$t('最大尺寸')}}）</span> -->
			</view>
			<view class="de_Size_module_2">
				<view>{{$t('长')}}：4.645m</view>
				<view style="margin-left: 20rpx;">{{$t('宽')}}：4.645m</view>
			</view>
			<view class="de_Size_module_3">
				<view>{{$t('高')}}：4.645m</view>
			</view>
		</view>
		<!-- 详细信息 -->
		<view class="de_detail">
			<image :src="HTTP_IMG_UTL+'bj_1115@4x.png'" style="width: 100%;height: 100%;"/>
			<view class="de_detail_title">
				<view style="font-size: 32rpx;font-weight: 600;margin-bottom: 10rpx;">{{$t('详细信息')}}</view>
				<view class="de_detail_title_1">
					<view style="margin-left: 8rpx;">{{$t('起批数量')}}</view>
					<view style="margin-right: 8rpx;">10个</view>
				</view>
				<view class="de_detail_title_1">
					<view style="margin-left: 8rpx;">{{$t('生产时间')}}</view>
					<view style="margin-right: 8rpx;">10小时</view>
				</view>
				<view class="de_detail_title_1">
					<view style="margin-left: 8rpx;">{{$t('是否含运费')}}</view>
					<view style="margin-right: 8rpx;">否</view>
				</view>
				<view class="de_detail_title_2">
					<view style="margin-left: 8rpx;">{{$t('付款方式')}}</view>
					<view style="margin-right: 8rpx;">预付全款</view>
				</view>
			</view>
		</view>
		<!-- 详情图片 -->
		<view class="de_detail_images">
			<view class="de_detail_images_title">
				<view class="de_line"></view>
				<view class="googs_images">{{$t('商品详情图片')}}</view>
			</view>
			<view class="de_detail_images_1">
				<image v-for="(item,index) in 5" :key="index" 
				:src='serverImageUrl("/static/images/index/huangji.png")' 
				style="width: 100%;height: 402rpx;margin-top: 10rpx;"/>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app'
	import {
		ImageUrl,
		isVideo,
		time,createC2CConversation
	} from "@/common/public";
	export default {
		data() {
			return {
				HTTP_IMG_UTL,
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				lang:'zh',//语言
				id: 0, // 商品id
				type: 1, // 1=推广，2=竞标
				releaseType: '',
				status: '',
				detailData:{},//详情信息
			}
		},
		onLoad(option) {
			this.releaseType = option.releaseType
			this.id = parseInt(option.id)
			this.type = parseInt(option.type)
			this.status = option.status
			this.lang = this.$i18n.locale
			this.getLang()
			this.getDetail()
		},
		methods:{
			getDetail() {
				switch (this.releaseType) {
					case 'goods':
						this.$u.api.collection.getGoodsDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
						})
						break;
					case 'transport':
						this.$u.api.collection.getTransportDetailDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.detailData.buy_images = res.images
							this.detailData.buy_videos = res.videos
							this.detailData.buy_files = res.files
						})
						break;
					case 'crossborder':
						this.$u.api.collection.getCrossborderListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.detailData.content = res.desc
							this.detailData.content_ru = res.desc_ru
							this.detailData.buy_images = res.images
							this.detailData.buy_videos = res.videos
							this.detailData.buy_files = res.files
						})
						break;
					case 'professional':
						this.$u.api.collection.getProfessionalListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.detailData.content = res.con
							this.detailData.content_ru = res.con_ru
						})
						break;
					case 'resource':
						this.$u.api.collection.getLibraryDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
							this.detailData.content = res.profile
							this.detailData.content_ru = res.profile_ru
							this.loading = true
						})
						break;
					case 'lifead':
						this.$u.api.collection.getLifeadListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
						})
						break;
					case 'news':
						this.$u.api.collection.getNewsListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
						})
						break;
					case 'exposure':
						this.$u.api.collection.getExposureListDetail({
							id: this.id
						}).then(res => {
							this.detailData = res
						})
						break;
				}
			},
			// 获取语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container_zh {
		// background-color: blue;
		text-align: center;
		font-size: 24rpx;
	    width: 100rpx;
	    overflow-wrap: break-word; /* or word-wrap: break-word; */
	    white-space: normal; /* default value, but included for clarity */
	}
	.container_ru {
		line-height: 1;
		height: 70rpx;
		margin-top: 16rpx;
		text-align: center;
		font-size: 15rpx;
	    width: 100rpx;
	    overflow-wrap: break-word; /* or word-wrap: break-word; */
	    white-space: normal; /* default value, but included for clarity */
	}
	.googs_images{
		width: 600rpx;
		height: 48rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		margin-left: 10rpx;
	}
	.de_detail_images_title{
		width: calc(100% - 40rpx);
		height: 48rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 32rpx;
		font-weight: 600;
	}
	.de_detail_images_1{
		width: 612rpx;
		min-height: 500rpx;
		display: flex;
		flex-direction: column;
		
	}
	.de_detail_images{
		width: calc(100% - 56rpx);
		min-height: 500rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
	}
	.de_detail_title_2{
		width: 100%;
		height: 65rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
	}
	.de_detail_title_1{
		width: 100%;
		height: 65rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #D8D8D8;
		font-size: 24rpx;
	}
	.de_detail_title{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		padding: 25rpx 42rpx 4rpx 36rpx;
	}
	.de_detail{
		width: calc(100% - 56rpx);
		height: 342rpx;
		position: relative;
		margin-top: 20rpx;
	}
	.de_Size_module_3{
		display: flex;
		align-items: center;
		font-size: 20rpx;
		margin-top: 18rpx;
		margin-left: 16rpx;
	}
	.de_Size_module_2{
		display: flex;
		align-items: center;
		font-size: 20rpx;
		margin-top: 18rpx;
		margin-left: 16rpx;
	}
	.de_Size_module_1{
		width: 100%;
		display: flex;
		align-items: flex-end;
		// background-color: red;
		font-size: 32rpx;
		font-weight: 600;
		// background-color: #D9F0A3;
	}
	.de_line{
		width: 8rpx;
		height: 36rpx;
		background: linear-gradient(102deg, #D9F0A3 0%, rgba(217, 240, 163, 0.411) 55%, rgba(201, 239, 49, 0) 100%);
	}
	.de_Size_module{
		width: calc(100% - 60rpx);
		height: 172rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx 36rpx 30rpx 20rpx;
		display: flex;
		flex-direction: column;
	}
	.de_Comprehensive_title{
		position: absolute;
		left: 0;
		top: 0;
		width: 392rpx;
		height: 44rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}
	.de_Comprehensive_evaluation{
		width: 400rpx;
		height: 58rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
	}
	.de_evaluate_block_left{
		width: 80rpx;
		height: 25rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.de_evaluate_block{
		height: 58rpx;
		width: 100%;
		margin-top: 14rpx;
		display: flex;
		justify-content: space-between;
	}
	.de_evaluate_title{
		width:540rpx ;
		height: 41rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		font-size: 32rpx;
		margin-top: 12rpx;
		margin-left: 4rpx;
	}
	.de_evaluate{
		width: 570rpx;
		height: 100%;
	}
	.de_logo{
		width: 120rpx;
		height: 124rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.de_size{
		width: calc(100% - 60rpx);
		height: 124rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		
	}
	.de_title_block_but_tow{
		font-size: 28rpx;
		width: 113rpx;
		min-height: 85rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.de_title_block_but_one{
		font-size: 28rpx;
		width: 113rpx;
		min-height: 85rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}
	.de_title_block_but{
		width: calc(100% - 112rpx);
		height: 85rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 50rpx;
		margin-left: 56rpx;
	}
	.de_title_block_title {
		width: 590rpx;
		height: 80rpx;
		font-size: 32rpx;
		word-break: break-all;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-weight: 700;
	}

	.de_title_block {
		width: calc(100% - 60rpx);
		min-height: 210rpx;
		// background-color: red;
	}

	.de_title {
		width: 100%;
		min-height: 270rpx;
		border-radius: 28rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.de_swiper {
		width: 100%;
		height: 748rpx;
		background-color: #FFFFFF;
	}

	.de_cantent {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
<style>
	page {
		background: #F6F6F6;
	}
</style>